<template>
	<view class="search">
		<Navbar :isSearch="true" @searchValue="searchValue" v-model="value" ></Navbar>
		<view class="wrap m-10">
			<view class="history mb-10">
				<view class="title">
					搜索历史
				</view>
				<view class="clear">
					清空
				</view>
			</view>
			<view class="historyList">
				<view class="" v-for="item in historyList" :key="item.id">
					{{item.name}}
				</view>
				
			</view>
			<!-- <button type="default" @click="test">test</button> -->
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {debounce} from '../../utils/common.js'
	export default {
		data() {
			return {
				value:""
			}
		},
		computed:{
			...mapState(['historyList'])
		},
		methods: {
			test(){
				this.$store.dispatch("setHistory","www")
			},
			searchValue:debounce(function(e){
				if(e){
					this.$store.dispatch("setHistory",e)	
				}else{
					return
				}
			})
		}
	}
</script>

<style lang="scss">
.search{
	.history{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #f5f5f5 solid;
		padding:20rpx 0;
		.title{
			color: #9013FE;
			font-weight: bold;
		}
		.clear{
			color: #30b33a;
			font-weight: bold;
		}
	}
	.historyList{
		display: flex;
		flex-wrap: wrap;
		
		view{
			border: 1px solid #909399;
			color: #909399 ;
			border-radius: 10rpx;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
			padding: 10rpx 26rpx;
			font-size: 24rpx;
		}
	}
}
</style>
